<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="myTheme.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
  <title>Code Highlighting</title>
</head>
<body>
  <div class="language-javascript">
    <pre><code class="language-javascript">
      const greeting = 'Hello, World!';
      console.log(greeting);
    </code></pre>
    <code>webpack.config.js</code>
  
    <div class="markdown-code-block">
      <pre lang="shell" class="shell"><code class="hljs stata">npm i webpack webpack-<span class="hljs-keyword"><span class="hljs-keyword">cli</span></span> -<span class="hljs-keyword"><span class="hljs-keyword">g</span></span>
      </code></pre>
      <div class="markdown-code-block-copy-btn"></div>
    </div>
  
    <div class="markdown-code-block">
      <pre lang="js" class="js"><code class="hljs javascript"><span class="hljs-comment"><span class="hljs-comment">// module.rules</span></span>
      {
        test: <span class="hljs-regexp"><span class="hljs-regexp">/\.css/</span></span> <span class="hljs-comment"><span class="hljs-comment">// 匹配目标文件</span></span>
        use: <span class="hljs-string"><span class="hljs-string">'css-loader'</span></span> <span class="hljs-comment"><span class="hljs-comment">// 选择loader 需要单独安装</span></span>
      }
      </code></pre>
      <div class="markdown-code-block-copy-btn"></div>
    </div>
  
    <div class="markdown-code-block">
      <pre lang="js" class="js"><code class="hljs javascript"><span class="hljs-comment"><span class="hljs-comment">// plugins</span></span>
      plugins: [
        <span class="hljs-comment"><span class="hljs-comment">// type object</span></span>
        <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> UglifyJsPlugin()
      ]
      </code></pre>
      <div class="markdown-code-block-copy-btn"></div>
    </div>
  
    <div class="markdown-code-block">
      <pre lang="js" class="js"><code class="hljs javascript"><span class="hljs-keyword"><span class="hljs-keyword">var</span></span> config = {
        entry: <span class="hljs-string"><span class="hljs-string">'./app.js'</span></span>,
        <span class="hljs-comment"><span class="hljs-comment">//...</span></span>
      };
      
      <span class="hljs-built_in"><span class="hljs-built_in">module</span></span>.exports = (env, argv) =&gt; {
        <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (argv.mode === <span class="hljs-string"><span class="hljs-string">'development'</span></span>) {
          config.devtool = <span class="hljs-string"><span class="hljs-string">'source-map'</span></span>;
        }
        <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (argv.mode === <span class="hljs-string"><span class="hljs-string">'production'</span></span>) {
          <span class="hljs-comment"><span class="hljs-comment">//...</span></span>
        }
        <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> config;
      };
      </code></pre>
      <div class="markdown-code-block-copy-btn"></div>
    </div>
  
    <code>webpackChunkName</code>
  
    <div class="markdown-code-block">
      <pre lang="js" class="js"><code class="hljs javascript"><span class="hljs-comment"><span class="hljs-comment">/* webpackChunkName: vendor*/</span></span>
      </code></pre>
      <div class="markdown-code-block-copy-btn"></div>
    </div>
  </div>
</body>
</html>